<template>
  <div class="person">
    <h2>需求：当水温达到60°，或水位达到80cm时，给服务器发请求</h2>
    <h2>当前水温：{{ temp }} ℃</h2>
    <h2>当前水位：{{ height }} cm</h2>
    <button @click="changeTemp">水温加一</button>
    <button @click="changeHeight">水位加十</button>
  </div>
</template>

<script setup lang="ts">
import {ref, watch, watchEffect} from "vue";

// 数据
const temp = ref<number>(50)
const height = ref<number>(50)

// 方法
const changeTemp = () => {
  temp.value++
}

const changeHeight = () => {
  height.value += 10
}

// 监视
// watch([temp, height], ([temp, height]) => {
//   if (temp >= 60 || height >= 80) {
//     console.log('发送请求')
//   }
// })

// 监视 -- watchEffect 实现
// 1、都能监听响应式数据的变化，不同的是监听数据变化的方式不同
// 2、watch：要明确指出监听的数据
// 3、watchEffect：不需要明确指出监听的数据（函数中用到哪些属性，那就监视哪些属性）
watchEffect(() => {
  console.log('水温：', temp.value)
  console.log('水位：', height.value)
  if (temp.value >= 60 || height.value >= 80) {
    console.log('发送请求')
  }
})
</script>

<style scoped lang="scss">
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }
}
</style>
